<template>
  <div class="addaddress">
      <!-- 顶部导航 -->
      <van-nav-bar fixed class="topbar"
      title="新增收货地址"
      left-text="返回"
      left-arrow
      @click-left="$router.go(-1)"
    />
<van-form @submit="addaddress" class="edit">
    <van-field
    v-model="formData.name"
    type="text"
    placeholder="联系人姓名"
    :rules="[{ required: true, message: '请填写姓名' }]"
  />
  <van-field
    v-model="formData.phone"
    placeholder="联系方式"
    :rules="[{ required: true, message: '请填写电话' }]"
  />
  <van-field
    v-model="formData.address"
    type="text"
    placeholder="联系地址"
    :rules="[{ required: true, message: '请填写联系地址(市/区/街道/小区单元楼)' }]"
  />
  <div style="margin: 16px;">
    <van-button round block type="info" native-type="addaddress">添加</van-button>
  </div>
</van-form>
  </div>
</template>

<script>
import { Toast } from 'vant';
import { mapActions,mapState } from 'vuex';
import { address_list } from '../utils/api';
export default {
    data() {
    return {
      formData:{
        name:'',
        phone:'',
        address:''


      }
    };
  },
  computed:{
    ...mapState(['addresslist']),
    },
  methods: {
    ...mapActions(['request_addresslist_add']),
    addaddress(){
    if(/^1[3|9|5|7|8]\d{9}$/.test(this.formData.phone) == false){
      Toast.fail("输入合法手机号")
    }else if(!this.formData.phone || !this.formData.address || !this.formData.name){
        Toast.fail("此选项不能为空")
    }else if(/^[\u4E00-\u9FA5]+$/.test(this.formData.address) == false || /^[\u4E00-\u9FA5]+$/.test(this.formData.name) == false){
        Toast.fail("请输入格式正确的字符")
    }
    else{
        // this.$store.dispatch('request_addresslist_add',this.formData)
        Toast.success('地址添加成功')
        this.request_addresslist_add(this.formData);
        console.log(this.addresslist);
        this.formData = []
        
    }
    }
  }
};
</script>

<style lang="scss" scoped>
.edit{
    margin-top: 40px;
}

</style>